<template>
  <div class="container-box">
    <el-row :gutter="0">
      <el-col :span="4">
        <el-tabs type="border-card" stretch @tab-click="onClickTab" v-model="showMuch">
          <el-tab-pane name="0">
            <span slot="label"><i class="el-icon-check"></i> 全部</span>
          </el-tab-pane>
          <el-tab-pane name="1">
            <span slot="label"><i class="el-icon-check"></i> 在線</span>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label"><i class="el-icon-check"></i> 離線</span>
          </el-tab-pane>
        </el-tabs>
        <div class="el-tabs--border-card2" v-if="assetsList.length">
          <!-- 一台车 start -->
          <one-car v-for="(item, index) in assetsDetails" :key="index" :assetsList="item" :assetsIndex="index" @setMap="resetMap"></one-car>
          <!-- 一台车 end -->
        </div>
      </el-col>
      <el-col :span="20">
        <div class="contbtn" v-if="lineArr.length > 0">
          <el-button v-if="starshow" class="btncol" type="primary" @click.native="starmove">開始動畫</el-button>
          <el-button v-if="!starshow" class="btncol" type="primary" @click.native="stopAnimation">停止動畫</el-button>
          <el-button :disabled="btndisabled" v-if="endshow" class="btncol" type="primary" @click.native="endmove"
            style="background-color: rgb(68, 138, 202);">暫停動畫</el-button>
          <el-button :disabled="btndisabled" v-if="!endshow" class="btncol" type="primary"
            @click.native="resumeAnimation" style="background-color: rgb(68, 138, 202);">繼續動畫</el-button>
        </div>
        <div>
          <el-row style="padding: 2px 10px 0;border: 1px #eeeeee solid;">
            <el-col :span="12" style="line-height: 37.5px;letter-spacing: 2px;">
              <span style="margin: 0 10px"><i style="color: #4EAD5B;" class="el-icon-location-outline" ></i>在線({{ onlineCar && onlineCar.length ? onlineCar.length : 0 }})</span>
              <span><i class="el-icon-location-outline"></i>離線({{ unlineCar && unlineCar.length ? unlineCar.length : 0 }})</span>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-checkbox v-model="checked" @change="changeShowName">顯示設備名稱</el-checkbox>
              <!-- <el-checkbox v-model="checked">地标</el-checkbox> -->
              <el-select v-model="value" style="width: 66px;margin-left: 10px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              刷新
              <el-select v-model="value2" style="width: 90px;margin-left: 10px;">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <map-container :copyCountdown="value" ref="goldMap"></map-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { AMapManager } from 'vue-amap'
import MapContainer from './components/map-container'
import { mapState } from 'vuex'
import OneCar from './components/one-car'

let amapManager = new AMapManager()

export default {
  name: 'map-index',

  components: {
    [MapContainer.name]: MapContainer,
    [OneCar.name]: OneCar
  },

  data() {
    return {
      showMuch: '0',
      lineArr: [],
      checked: true,
      loading: false,
      options: [{
        value: 10,
        label: '10s'
      }, {
        value: 20,
        label: '20s'
      }, {
        value: 30,
        label: '30s'
      }],
      value: 20,
      options2: [{
        value: '1',
        label: '高德地圖'
      }, {
        value: '2',
        label: '谷歌地圖'
      }],
      value2: '2',
    }
  },

  computed: {
    ...mapState({
      assetsList: (state) => state.map.assetsList,
      assetsMapLists: (state) => state.map.assetsMapLists,
      assetsDetails: (state) => state.map.assetsDetails
    }),

    itemNo: function() {
      return this.$route.params.itemNo
    },

    onlineCar: function() {
      let res = this.assetsDetails.filter(item => item.onlineTime > 0)
      return res
    },

    unlineCar: function() {
      let res = this.assetsDetails.filter(item => item.onlineTime == 0)
      return res
    },

    showAssetsList: function() {
      return this.showMuch == '1' ? this.assetsList.filter(item => item.isOnline == 1) : this.showMuch == '2' ? this.assetsList.filter(item => item.isOnline == 0) : this.assetsList
    }
  },

  mounted() {
    this.getData(this.itemNo)
  },

  beforeDestroy() {
    //退出前清空
    this.$store.dispatch('map/resetAssetsList')
  },

  methods: {
    getData(itemNo) {
      this.loading = true
      this.$store.dispatch('map/fetchLawCaseInfo', { itemNo: itemNo }).then(res => {
        // console.log('获取案件详情')
        // console.log(res)
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.error('获取案件详情失败：' + err)
        this.$message.error('获取案件详情失败：' + err)
        return false
      })
    },

    resetMap() {
      this.$refs.goldMap.resetMap()
    },

    changeShowName(e) {
      this.$store.dispatch('map/changeShowName', e)
    },

    onClickTab() {
      // console.log(this.showMuch)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";

.container-box {
  .button-box {
    margin: 50px;
  }

  /deep/.el-tabs__content {
    display: none;
  }

  /deep/.el-tabs--border-card {
    border-bottom: 0px;
  }

  .el-tabs--border-card2 {
    height: calc(100vh - 180px);
    padding: 20px;
    background: #FFF;
    border: 0.01563rem solid #DCDFE6;
    border-top: 0;
    -webkit-box-shadow: 0 0.03125rem 0.0625rem 0 #DCDFE6, 0 0 0.09375rem 0 #DCDFE6;
    box-shadow: 0 0.03125rem 0.0625rem 0 #DCDFE6, 0 0 0.09375rem 0 #DCDFE6;
  }
}

#container {
  min-width: 1000px;
  width: 100%;
  height: 100%;
  min-height: 600px;
}

span {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.el-select {
  /deep/ .el-input__inner {
    color: #000000;
  }
}
</style>
